import 'package:flutter/material.dart';
import '../../../utils/G.dart';

// 列表展示
class MyList extends StatefulWidget {
  List list;
  MyList({Key? key, required this.list}) : super(key: key);

  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  @override
  Widget build(BuildContext context) {
    return SliverList(
        delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
      var item = widget.list[index];
      return GestureDetector(
          onTap: () {
            // 跳转到商品详情页
            Map<String, dynamic> p = {'id': item['id']};
            G.router.navigateTo(
                context, '/product_detail' + G.parseQuery(params: p));
          },
          child: _renderListItem(item));
    }, childCount: widget.list.length));
  }

  Widget _renderListItem(Map item) {
    return Container(
      // color: Colors.white,
      margin: const EdgeInsets.fromLTRB(5, 10, 5, 5),
      decoration: BoxDecoration(
          // borderRadius: BorderRadius.all(Radius.circular(10.0)),
          boxShadow: [
            BoxShadow(
                color: Colors.grey[300]!,
                offset: const Offset(4, 4),
                blurRadius: 10.0)
          ]),
      child: ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(10)),
          child: Container(
            color: Colors.white,
            padding: const EdgeInsets.fromLTRB(0, 5, 0, 5),
            child: Flex(
              direction: Axis.horizontal,
              children: [
                ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Image.network(
                      item['image'],
                      width: 100,
                      height: 100,
                    )
                    // 使用下面的方式，展示图片时，图片更新不及时
                    // G.imageWidget(
                    //   item['image'],
                    //   width: 100,
                    //   height: 100,
                    // )
                    ),
                Expanded(
                  // flex: 3,
                  child: Container(
                      height: 100,
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                                width: double.infinity,
                                child: Text(
                                  item['store_name'],
                                  style: const TextStyle(fontSize: 16),
                                  overflow: TextOverflow.ellipsis,
                                )),
                            Container(
                                width: double.infinity,
                                child: Text(
                                  "￥ " + item['price'].toString(),
                                  style: TextStyle(
                                      color: Theme.of(context).primaryColor,
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500),
                                )),
                            Row(
                              children: [
                                Container(
                                  child: Text("已售：" + item['sales'].toString(),
                                      style: const TextStyle(
                                        fontSize: 14,
                                        color: Colors.grey,
                                      )),
                                ),
                              ],
                            ),
                          ])),
                ),
              ],
            ),
          )),
    );
  }
}
